
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>功能API</title>
    <link href="/static/devtools30/layui/css/layui.css" rel="stylesheet" />
    <link href="/static/devtools30/css/devindexbase.css" rel="stylesheet" />
    <script src="/static/devtools30/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="/static/devtools30/layui/layui.all.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/devtoolCommon.js" type="text/javascript"></script>

    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/theme/eclipse.css" rel="stylesheet" type="text/css" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.css" rel="stylesheet" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/addon/display/fullscreen.css" rel="stylesheet" />
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/mode/sql/sql.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/addon/display/fullscreen.js" type="text/javascript"></script>


</head>
<style>
    /*-------------------------tab-------------------------*/

    .layui-tab {
        margin: 0;
    }


    /*边框*/

    .layui-tab-title {
        border-bottom-width: 3px;
        border-bottom-color: #f7f7f7;
    }


    /*字体*/

    .layui-tab-title li {
        font-size: 11px!important;
    }


    /*高度*/

    .tabwrap .layui-tab-title {
        height: 24px;
    }


    /*高度*/

    .tabwrap .layui-tab-title li {
        line-height: 24px;
    }


    /*高度*/

    .tabwrap .layui-tab-title .layui-this:after {
        height: 24px;
    }

    .layui-tab-title .layui-this:after {
        /*height: auto!important;*/
    }


    /*选中时样式*/

    .tabwrap .layui-tab-title .layui-this {
        color: white;
        background: #41BFC0;
    }


    /*关闭按钮样式*/

    .tabwrap .layui-tab-title li .layui-tab-close {
        color: #FFFFFF!important;
    }





    /*表格字体大小*/

    .layui-table td,
    .layui-table th {
        font-size: 11px!important;
    }


    /*表格边距*/

    .layui-table,
    .layui-table-view {
        margin: 0;
    }



    .layui-btn-primary2 {
        border: 0px solid #C9C9C9;
        /*color: #0066CC;*/
        /*background-color: transparent;*/
        background: #41BFC0;
    }
    .layui-btn {
        height: 26px;
        line-height: 26px;
        font-size: 11px;
        margin-bottom: 2px;
    }
    .textheight {
        height: 220px;
    }

    .sqlheght {
        height: 300px;
    }
    .CodeMirror {
        border: 1px solid #eee;
    }
    .jsonwrap{
        height: 300px;
    }
    .layui-input-block{
        margin-left: 0!important;
    }
    .addwrap {
        padding-top: 40px;
    }

    .addwrap .layui-input,
    .layui-select {
        height: 25px;
    }

    .addwrap .layui-input-block {
        min-height: 26px;
        margin-left: 70px;
    }

    .addwrap .layui-form-label {
        padding: 0;
        text-align: left;
        height: 26px;
        line-height: 26px;
        width: 70px;
    }

    .layui-form-mid {
        line-height: normal!important;
    }

    .layui-form-item .layui-input-inline {
        width: 250px;
    }
</style>
<body>
<div>

    <div class="layui-tab tabwrap " lay-filter="tab" style="margin-top: 5px">
        <ul class="layui-tab-title" >
            <li class="layui-this" lay-id="sql">SQL执行</li>
            <li lay-id="demojson">JSON示例</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show ">
                <!--<div class="flex flex-jusity-betreen">
                                <div>-->
                <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf" style="padding: 0;">
                    <div class="color5" >
                        <span id="tips" >
                            <i class="layui-icon layui-icon-tips" style="font-size: 14px; color: #aaaaaa;"></i>
                            关联SQL
                        </span>
                        <span class="colororange">
                            1.当前用户可以用#devuser# , devuser可通过URL传递或放在session中
                        </span>
                    </div>

                    <div class="layui-btn-group btns tab4 ">

                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="saveSql()">保存SQL</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='tab4_tab01'>全屏编辑</button>
                    </div>
                </div>
                <div class="layui-input-block marginbottom10" style="margin-left: 0!important;font-size: 13px;">
                    <textarea name="sql" id="sql" placeholder="" class="layui-textarea sqlheght"></textarea>
                </div>
                <!--</div>
                                <div>-->
                <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf" style="padding: 0;">
                    <div class="colororange">
                        1.JSON通过Post提交，ContentType用application/json
                        2.只支持一级JSON,数据节点为data,当data的value为单个json对象时表示单个提交，当data的value为json数组时为批量提交，这时可以批量执行配置的SQL
                    </div>
                    <div class="layui-btn-group btns tab5">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="editTjOpt()">新增</button>
                    </div>
                </div>
                <div class="backgroundf">
                    <table id="mygrid2" lay-filter="mygrid2"></table>
                </div>
                <!--</div>
                            </div>-->
            </div>

            <div class="layui-tab-item">
                <div style="width: 49%;float: left;">
                    <div class="colororange padding100">提交单个JSON对象</div>
                    <div class="layui-input-block" style="margin-left: 0;">
                        <textarea name="postJsonOne" id="postJsonOne" placeholder="{}" class="layui-textarea textheight"></textarea>
                    </div>
                </div>
                <div style="width: 49%;float: right;">
                    <div class="colororange padding100">提交数组JSON对象</div>
                    <div class="layui-input-block" style="margin-left: 0;">
                        <textarea name="postJsonAry" id="postJsonAry" placeholder="{}" class="layui-textarea textheight"></textarea>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

</body>
<script>
    var height = dlCommon.getWinHeight();
    var width=dlCommon.getWinWidth();
    var editor=null;
    var dataid=dlCommon.getUrlParam("id");
    var SQLSPLIT="[(${SQLSPLIT})]";
    $(function(){

        initGrid();//初始表单


        initEvent();//初始化事件

        getSqlData();//sql
        getOptList();//参数配置列表

        $("#postJsonOne").height(height-100);
        $("#postJsonAry").height(height-100);
        layui.form.render();
    })

    function getSqlData(){
        dlCommon.getJSON("/DevtApiSubEntityController/getdata",{id:dataid},function(res){
            if(!res.success){
                dlCommon.layerError("获取Sql时出错："+res.msg);
                return;
            }
            editor.setValue(res.data.sql);
        },true);
    }
    function getOptList(){
        layui.table.reload("mygrid2",{
            url:"/DevtApiTjoptEntityController/getAllByPid",
            loading:true,
            where:{pid:dataid}

        });

        dlCommon.getJSON("/DevtApiTjoptEntityController/getDemoJsonByPid?pid="+dataid,{},function (resdata) {
            if(!resdata.success){
                dlCommon.layerError(res.msg);
                return;
            }
            $("#postJsonOne").val(resdata.data.jsonstrOne);
            $("#postJsonAry").val(resdata.data.jsonstrAry);
        })
    }
    function saveSql() {
        var sql=editor.getValue();
        dlCommon.post("/DevtApiSubEntityController/saveSql",{id:dataid,sql:sql},function(res){
            if(!res.success){
                dlCommon.layerError(res.msg);
                return;
            }
            dlCommon.layerMsg("保存成功")

        },true);
    }

    function editTjOpt(id,type){
        var url="/V_DevtApiTjoptEntityController/editJson?pid="+dataid;
        if(id){
            url+="&id="+id;
        }
        dlCommon.layeropen(800,520,'JSON属性维护',url);
    }
    function delTjOpt(id){
        if(!id){
            dlCommon.layerInfo("请选择要删除的数据")
            return;
        }
        dlCommon.layerConfirm("确定要删除该数据吗？",function(){
            dlCommon.getJSON("/DevtApiTjoptEntityController/delete",{id:id},function(res){
                if(!res.success){
                    dlCommon.layerError(res.msg);
                    return;
                }
                dlCommon.layerSuccess("删除成功",function(){
                    getOptList();
                })

            },true);
        })

    }

    function initGrid(){

        layui.table.render({
            elem: '#mygrid2',
            height: height-365,
            size: 'sm',
            page: false ,
            cols: [
                [ //表头
                    //{field: 'id', title: '分类', width:80, fixed: 'left'}
                    {field: 'xh', title: '序号', width: '5%'},
                    // {field: 'lxlabel', title: '类型', width: '5%',},
                    {field: 'argname', title: 'JSON属性名称', width: '10%',},
                    // {field: 'cslx', title: '参数类型', width: '10%'},
                    {field: 'requeriedlabel', title: '必填', width: '5%'},
                    // {field: 'tjsql', title: '条件sql'},
                    {field: 'bz', title: '备注', width: '10%',},
                    {field: 'opera', title: '操作', width: '10%', templet: function(d){
                            var str="";
                            str += '<button type="button" onclick="editTjOpt(\''+d.id+'\')" class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">修改</button>';
                            str += '<button type="button" onclick="delTjOpt(\''+d.id+'\')" class="layui-btn layui-btn-danger layui-btn-xs layui_edit_btn">删除</button>';

                            return str;
                        }},

                ]
            ]
        });
    }
    function initEvent(){

        editor = CodeMirror.fromTextArea(document.getElementById("sql"), {
            lineNumbers: true,
            matchBrackets: true,
            lineWrapping:true,
            mode: "text/x-mssql",
            extraKeys: {

                "Esc": function(cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                }
            }
            // mode: "text/x-sql"
        });
        editor.setOption("theme", "eclipse");
        editor.setSize('auto', '250px');
        editor.setValue($("#sql").val());

        //sql窗口，历史版本 按钮点击事件
        $('.tab4>button').on('click', function() {
            var names = $(this)[0].name;
            if(names == 'tab4_tab01') {
                dlCommon.layerMsg("按ESC退出全屏")
                editor.setOption("fullScreen", true);
                editor.focus();

            }
            if(names == 'tab4_tab02') {
                dlCommon.layeropen(width*0.8,height*0.8,"sql日志","/V_apiFunctionHistory/toPage?pid="+dataid);
            }
        })

        //增加JSON校验，增加JS校验 按钮点击事件
        $('.tab6>button').on('click', function() {
            var names = $(this)[0].name;
            if(names == 'tab6_tab01') {
                editTjOptCheck("",0);

            }
            if(names == 'tab6_tab02') {
                editTjOptCheck("",1);

            }
        })


        layui.form.render();
    }



</script>

</html>